<template>
	<view class="pages">
		<view class="hedaers">
			<view class="hedaersitems" v-for="(items,index) in ScoreboardTypeData" :key="index" :class="[itemsIndex == index ? 'xuanzhong' : '']" @click="select(index)">
				{{items.text}}
			</view>
		</view>
		<inforceTP v-show="itemsIndex == 0" ref="inforceTP"></inforceTP>
		<PendingTP v-show="itemsIndex == 1" ref="PendingTP"></PendingTP>
		<Recruiting v-show="itemsIndex == 2" ref="Recruiting"></Recruiting>
	</view>
</template>

<script>
	import inforceTP from '@/pages/components/InforceTP.vue'
	import PendingTP from '@/pages/components/PendingTP.vue'
	import Recruiting from '@/pages/components/Recruiting.vue'
	export default {
		components:{inforceTP,PendingTP,Recruiting},
		data() {
			return {
				itemsIndex:0,
				ScoreboardTypeData:[{id:0,text:"Inforce TP"},{id:1,text:"Pending TP"},{id:2,text:"Recruiting"}]
			}
		},
		mounted() {
			this.$refs.inforceTP.getList()
		},
		methods: {
			select(index) {
				this.itemsIndex = index
				this.$refs.inforceTP.getList()
				this.$refs.PendingTP.getList()
				this.$refs.Recruiting.getList()
			}

		}
	}
</script>

<style>
	.pages {
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		background-color: #F0F0F0;
		/* padding: 0 20rpx; */
		box-sizing: border-box;

	}
.hedaers {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 80rpx;
	border-bottom: 2rpx solid #ccc;
}
.hedaersitems {
	line-height: 80rpx;
	text-align: center;
	width: 100%;
	height: 100%;
}
.xuanzhong {
	border-bottom: 2rpx solid #273562;
	color: #273562;
}
</style>